<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>考勤机管理</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="device-mgr">
      <div style="margin-bottom:10px">
        <el-button size="medium" type="primary" @click="addDevice">新增</el-button>
      </div>
      <div class="device-mgr-table-div">
        <el-table fit stripe border :data="deviceList" style="width: 100%" height="parent">
          <el-table-column :resizable="false" label="设备类型" width="100px" align="center">
            <template slot-scope="scope">
              <span>{{i18n.getMsg('attendance.device.type.'+scope.row.deviceType)}}</span>
            </template>
          </el-table-column>
          <el-table-column label="设备编号" prop="deviceId" min-width="120px" header-align="center"></el-table-column>
          <el-table-column label="设备名称" prop="deviceName" min-width="120px" header-align="center"></el-table-column>
          <el-table-column label="标准体温" prop="temperatureBasic" min-width="100px" align="center"></el-table-column>
          <el-table-column label="地方码" prop="codeName" min-width="100px" align="center"></el-table-column>
          <el-table-column label="卡口位置" prop="codeArea" min-width="120px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" label="操作" width="230px" align="center">
            <template slot-scope="scope">
              <div class="table-btns">
                <div>
                  <el-button type="primary" size="mini" @click="updateDevice(scope.row)">修改</el-button>
                  <el-button type="primary" size="mini" @click="settingManage(scope.row)">设置管理员</el-button>
                  <el-button type="danger" size="mini" @click="deleteDevice(scope.row)">删除</el-button>
                </div>
                <div style="margin-top:5px" v-if="scope.row.deviceType===2">
                  <el-button type="primary" size="mini" @click="createQrcode(scope.row)">生成访客二维码</el-button>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-if="pagination.totalCount!==0" style="text-align:right;margin-top:5px;">
        <el-pagination background :page-size="pagination.pageSize" :total="pagination.totalCount" :current-page.sync="pagination.currentPage"
          @current-change="pageChange"></el-pagination>
      </div>
    </div>

    <el-dialog :title="formTitle" :visible.sync="openForm" width="460px" top="calc(50vh - 220px)" @closed="formClosed">
      <div style="height:370px;overflow:auto">
        <template v-if="openForm">
          <manage-setting v-if="formType==='manageSetting'" :device="selectDevice" @setting-success="manageSettingSuccess"></manage-setting>
          <device-form v-else :type="formType" :device="selectDevice" @save-success="saveSuccess"></device-form>
        </template>
      </div>
    </el-dialog>

    <el-dialog title="访客二维码" :visible.sync="openCode" top="calc(50vh - 160px)" @closed="codeClosed">
      <div style="height:200px;overflow:auto">
        <qr-code v-if="openCode" :data="{deviceId:selectDevice.id}" :url="qrcodeBaseUrl" :font-size="14">
          {{user.company}}:{{selectDevice.id}}
        </qr-code>
      </div>
    </el-dialog>
  </div>
</body>

<script src="./myJs/importFile.js"></script>
<script>
  importFile([
    "/vueSystem/components/css/checkGroup.css",
    "/vueSystem/components/css/qrCode.css",
    "./attendanceMgr/attendanceDeviceMgr/css/deviceForm.css",
    "./attendanceMgr/attendanceDeviceMgr/css/manageSetting.css"
  ], [
    "/static/vue/qrcode.min.js",
    "/vueSystem/i18n/index.js",
    "/vueSystem/components/checkGroup.js",
    "/vueSystem/components/qrCode.js",
    "/vueSystem/models/baseModel.js"
  ]);

</script>
<script src="./attendanceMgr/attendanceDeviceMgr/deviceForm.js"></script>
<script src="./attendanceMgr/attendanceDeviceMgr/manageSetting.js"></script>

<script>
  var app = new Vue({
    el: '#app',
    data: function () {
      return {
        loading: false,
        deviceList: [],
        pagination: {
          currentPage: 1,
          totalCount: 0,
          pageSize: 10
        },
        openForm: false,
        openCode: false,
        formType: '',
        formTitle: '',
        selectDevice: null,
        user:null,
        qrcodeBaseUrl:'http://8888.shinehao.net/weixin/phoneApp/visitorInfo'
      };
    },

    created: function () {
      var self = this;
      this.loading = false;
      SysUtil.getUser().then(function (user) {
        self.user = user;
        return self.setDeviceList();
      }).catch(function(){
        self.loading = false;
      });
    },

    methods: {
      setDeviceList: function () {
        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;
        var postData = {
          start: start,
          length: pageSize
        };

        this.loading = true;
        var self = this;
        return ajaxRequest('dingTalk/queryAttendDevice', postData, false).then(function (res) {
          var deviceList = res.returnData;
          if (deviceList.length === 0 && currentPage !== 1) {
            self.pagination.totalCount = res.iTotalRecords;
            self.$nextTick(function () {
              self.setDeviceList();
            });
            return;
          }

          self.deviceList = deviceList;
          for (var i = 0; i < deviceList.length; i++) {
            var device = deviceList[i];
            var temperatureBasic = device.temperatureBasic;
            if (SysUtil.isEmpty(temperatureBasic)) {
              temperatureBasic = undefined;
            } else {
              temperatureBasic = Number(temperatureBasic);
            }
            device.temperatureBasic = temperatureBasic;
          }
          self.pagination.totalCount = res.iTotalRecords;
          self.loading = false;
          return deviceList;
        }).catch(function () {
          self.loading = false;
          return [];
        });
      },

      pageChange: function () {
        this.setDeviceList();
      },

      addDevice: function () {
        this.formType = 'add';
        this.formTitle = '新增考勤机';
        this.openForm = true;
      },

      updateDevice: function (device) {
        this.formType = 'update';
        this.formTitle = '修改考勤机';
        this.selectDevice = device;
        this.openForm = true;
      },

      saveSuccess: function () {
        this.openForm = false;
        this.setDeviceList();
      },

      formClosed: function () {
        this.formType = '';
        this.formTitle = '';
        this.selectDevice = null;
      },

      deleteDevice: function (device) {
        var self = this;
        this.$confirm('是否确定删除该考勤机?', '删除确认', {
          confirmButtonText: '是',
          cancelButtonText: '否'
        }).then(function () {
          self.toDeleteDevice(device);
        }).catch(function () {});
      },

      toDeleteDevice: function (device) {
        this.loading = true;
        var self = this;

        ajaxRequest('dingTalk/deleteAttendDevice', {
          id: device.id
        }).then(function () {
          self.loading = false;
          self.$alert('设备删除成功', '信息', {
            callback: function () {
              self.setDeviceList();
            }
          });
        }).catch(function () {
          self.loading = false;
        });
      },

      settingManage: function (device) {
        this.formType = 'manageSetting';
        this.formTitle = '设置管理员';
        this.selectDevice = device;
        this.openForm = true;
      },

      manageSettingSuccess: function () {
        this.openForm = false;
      },

      createQrcode: function (device) {
        this.selectDevice = device;
        this.openCode = true;
      },

      codeClosed:function(){
        this.selectDevice = null;
      }
    },

    components: {
      DeviceForm: DeviceForm,
      ManageSetting: ManageSetting,
      QrCode: QrCode
    }
  });

</script>

<style>
  .device-mgr {
    padding: 10px 20px 5px;
    height: calc(100% - 15px);
    display: flex;
    flex-direction: column;
  }

  .device-mgr .device-mgr-table-div {
    flex: 1;
    overflow: auto;
  }

  .device-mgr .device-mgr-table-div .table-btns .el-button+.el-button {
    margin-left: 0;
  }

</style>

</html>
